<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页   </title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">

    <!--引入editor.md的依赖-->
    <link rel="stylesheet" href="editor.md//css/editormd.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!--导航栏-->
    <div class="nav">
        <img src="image/头像.jpg" alt="">
        <span class="title">ybo的博客系统</span>
        <!--spance用来占位-->
        <span class="spance"></span>
        <!--按钮-->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="javascript:logout()">注销</a>

    </div>

    <!--页面主体-->
    <div class="container">
        <div class="container-left">
            <!--用这个.card来表示用户信息-->
            <div class="card">
                <img src="image/草帽.jpg" alt="">
                <h3>ybo</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>
        </div>
        <div class="container-right">
            <div class="blog-content">
                <!--博客标题-->
                <h3>我的第er篇博客</h3>
                <!--博客时间-->
                <div class="data">2022-9-28 07:00:00</div>
                <!--博客正文-->
                <div id="content" style="opacity: 80%">
                   
                </div>
            </div>
              
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="js/app.js"></script>
    <script>
        function getBlog() {
            $.ajax({
                type: 'get',
                url: 'showblog' + location.search,
                
                success: function(body) {
                    
                    let h3 = document.querySelector('.blog-content h3');
                    h3.innerHTML = body.data.title;
                    let divDate = document.querySelector('.blog-content .data');
                    divDate.innerHTML = body.data.postTime;
                    // 未渲染
                    //let divContent = document.querySelector('#content');
                    //console.log(body.content)
                    //divContent.innerHTML = body.content;

                    // 使用editor.md 进行渲染
                    // 【重要】 这个方法就是 editor.md 提供的一个方法把 markdown 字符串转成格式化效果
                    // 第一个参数是一个 div 的 id ，表示把渲染的结果放在那个 div 中，
                    // 第二个参数是一个 js 对象 ， 把正文内容传入即可
                    editormd.markdownToHTML('content',{
                        markdown : body.data.content
                    });
                }
            });
        }
        getBlog();
        

        
        //获取当前用户信息
        function getUserInfo() {
            $.ajax({
               type:'get',
               url: 'userInfo'+ location.search,
               success: function(body){
                   console.log(body)
                   // 让后端在查询失败的时候，不要返回200，而是返回403
                   //避免在前端触发 success 分支
                   let h3 = document.querySelector('.card h3');
                   h3.innerHTML = body.data.username;

                   if(body.data.password==1) {
                    let deletA = document.createElement('a');
                    deletA.innerHTML='删除';
                    deletA.href="javascript:mydel(location.search)";
                    let navDiv = document.querySelector('.nav');
                    navDiv.appendChild(deletA);
                   }
                } 
            });
        }

        function mydel(x) {
            if(confirm("确认删除？")){
                jQuery.ajax({
                    type:'post',
                    url:'blogDelete'+x,
                    success:function(result){
                        if(result!=null && result.data>=0){
                            alert("恭喜删除成功！");
                            location.href = "blog_list.html";
                        }else{
                            alert("抱歉：删除失败，请重试！");
                        }
                    }
                });
            }
        }

        getUserInfo();
        
        // 注销
        function logout() {
        $.ajax({
            type: 'get',
            url: 'logout',
            success: function() {
                location.href = "blog_list.html"
            }
        });
}
    </script>


</body>
</html>